<template>
	<div class="">
		<el-form ref="searchForm" :inline="true" :model="searchForm">
			<el-form-item label="采购商品编号">
				<el-input v-model="searchForm.goods_no" placeholder="请输入采购商品编号" clearable />
			</el-form-item>
			<el-form-item label="采购商户名称">
				<el-input v-model="searchForm.shop_name" placeholder="请输入采购商户名称" clearable />
			</el-form-item>
			<el-form-item label="采购商品名称">
				<el-input v-model="searchForm.goods_name" placeholder="请输入采购商品名称" clearable />
			</el-form-item>
			<el-form-item label="受理状态">
				<el-select v-model="searchForm.status" filterable placeholder="请选择受理状态" clearable style="width: 170px;">
					<el-option
						v-for="(item,index) in options1"
						:key="item"
						:label="item"
						:value="index">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="search()">查询</el-button>
				<el-button size="small" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-divider />
		<div style="padding:0 30px">
			<div class="flex align-center table-top-btns">
				<h5 class="flex align-center">
					<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
				</h5>
				<el-button size="small" type="warning" @click="exportsData">导出</el-button>
			</div>
			<el-table v-show="tableData.length > -1" :data="tableData" border>
				<el-table-column align="center" prop="id" label="商品ID" />
				<el-table-column align="center" prop="status_name" label="状态" width="100">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status==1||scope.row.status==6" type="success">{{scope.row.status_name}}</el-tag>
						<el-tag v-else-if="scope.row.status==7||scope.row.status==5" type="danger">{{scope.row.status_name}}</el-tag>
						<el-tag v-else>{{scope.row.status_name}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="goods_no" label="商品编号" />
				<el-table-column align="center" prop="shop_name" label="采购商家" show-overflow-tooltip />
				<el-table-column align="center" prop="category" label="类目" />
				<el-table-column align="center" prop="brand" label="品牌" />
				<el-table-column align="center" prop="goods_name" label="商品名称" />
				<el-table-column align="center" prop="is_new" label="成新度" />
				<el-table-column align="center" prop="color" label="颜色" />
				<el-table-column align="center" prop="run_memory" label="运行内存" />
				<el-table-column align="center" prop="memory" label="内存" />
				<el-table-column align="center" label="收货地址" width="200">
					<template slot-scope="scope">
						{{scope.row.province}}{{scope.row.address}}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="realname" label="收货人" />
				<el-table-column align="center" prop="mobile" label="联系电话" width="120" />
				<el-table-column align="center" prop="website_price" label="官网价" />
				
				<el-table-column align="center" prop="memory" label="是否监管">
					<template slot-scope="scope">
						{{ scope.row.is_supervise==1?'是':'否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="is_invoice" label="是否含票">
					<template slot-scope="scope">
						{{ scope.row.is_invoice==1?'是':'否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="is_remote" label="是否远程">
					<template slot-scope="scope">
						{{ scope.row.is_remote==1?'是':'否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="price" label="报价金额" width="150"/>
				<el-table-column align="center" prop="create_time" label="采购时间" width="150"/>
				<el-table-column fixed="right" align="center" label="操作" width="270px">
					<template slot-scope="scope">
						<el-button @click="handleDo(scope.row.id)" size="small" type="success">受理</el-button>
						<el-button @click="handleFile(scope.row.id,scope.row.order_id,scope.row)" size="small" type="primary">添加物流</el-button>
						<el-dropdown  @command="command => handleMore(command, scope.row.id)">
            <span class="el-dropdown-link blue-font pointer" style="margin-left:10px">
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleDeliver">发货</el-dropdown-item>
              <el-dropdown-item command="handleNot">不受理</el-dropdown-item>
              <el-dropdown-item command="handleDeliverNot">取消发货</el-dropdown-item>
              <el-dropdown-item command="handleGetGoods">确认收货</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<custom-page ref="customPage" :total="total" @getList="getList" />
		</div>
		<file-dialog ref="fileDialog" :order-id="selectId" :item-list="itemList" @getList="getList"></file-dialog>
		<make-dialog ref="makeDialog" :apply-id="applyId" @getList="getList"></make-dialog>
	</div>
</template>
<script>
import myDatePicker from '@/components/myDatePicker'
import customPage from '@/components/customPage'
import fileDialog from './components/fileDialog'
import makeDialog from './components/makeDialog'
import { sendProcureList,sendProcureDo,sendProcureNot,sendProcureDeliver,sendProcureDeliverNot,sendProcureGetGoods,procureApplyData,sendProcureListExport } from '@/api/audit'
export default {
	components: {customPage,myDatePicker,fileDialog,makeDialog},
	data() {
		return {
			searchForm:{
				status:'',
				shop_name:'',
				goods_name:'',
				goods_no :''
			},
			tableData:[],
			options1:[],
			itemList:[],
			applyId:''
		}
	},
	mounted() {
		this.getList()
		procureApplyData().then(res=>{
			this.options1=res
		})
	},
	methods: {
		//导出数据 
		exportsData(){
			console.log(1);
			sendProcureListExport({...this.searchForm}).then(res=>{
				console.log(res);
			})
		},
		handleMore(command, id,orderId){
			if(command=='handleDeliver'){
				this.handleDeliver(id)
			}else if(command=='handleNot'){
				this.handleNot(id)
			}else if(command=='handleGetGoods'){
				this.handleGetGoods(id)
			}else if(command=='handleDeliverNot'){
				this.handleDeliverNot(id)
			}
		},
		// 上传文件
		handleFile(id,orderId,item){
			this.itemList=item
			this.selectId=orderId
			this.$refs.fileDialog.dialogVisible = true
		},
		// 受理采购
		handleDo(id){
			this.$confirm('您确定受理采购商品吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        sendProcureDo(id).then(res=>{
					this.getList()
				})
      }).catch(() => { })
		},
		// 不受理采购
		handleNot(id){
			this.$confirm('您确定操作不受理采购商品吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        sendProcureNot(id).then(res=>{
					this.getList()
				})
      }).catch(() => { })
		},
		// 采购发货
		handleDeliver(id){
			this.$confirm('您确定操作采购商品发货吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        sendProcureDeliver(id).then(res=>{
					this.getList()
				})
      }).catch(() => { })
		},
		// 采购取消发货
		handleDeliverNot(id){
			this.$confirm('您确定操作采购商品取消发货吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
				sendProcureDeliverNot(id).then(res=>{
					this.getList()
				})
      }).catch(() => { })
		},
		// 受理确认收货
		handleGetGoods(id){
			this.applyId=id
			this.$refs.makeDialog.dialogVisible = true
			// this.$confirm('您确定要操作采购确定收货吗?', '删除', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消'
      // }).then(() => {
			// 	sendProcureGetGoods(id).then(res=>{
			// 		this.getList()
			// 	})
      // }).catch(() => { })
		},
		search(){
			this.$refs.customPage.page = 1
			this.getList()
		},
		reset(){
			this.searchForm = {
				status:'',
				shop_name:'',
				goods_name:'',
				goods_no :''
      }
      this.getList()
		}, 
		// 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      sendProcureList({
        page,
        pageSize,
        ...this.searchForm,
      }).then((res) => {
        const { list } = res.data
        this.tableData = res.data || []
        this.total =  res.total || 0
      })
    },
	},
}
</script>
<style></style>
  